<template>
  <a-drawer
    :bodyStyle="{paddingTop:'0'}"
    :width="630"
    closable
    placement="right"
    :visible="visible"
    @close="visible=false"
  >
    <div slot="title" class="g-flex g-y-center">
      <div style="color: #000000;font-weight: bold;">项目详情</div>
    </div>
    <a-spin :spinning="spinning">
      <a-tabs :default-active-key="1" @change="changeTabs">
        <a-tab-pane :key="1" tab="项目清单">
          <a-form :form="form" class="input-search" >
            <a-row :gutter="16" style="margin: 0px 0 10px;">
              <a-col :span="12" >
                <a-form-item  has-feedback style="margin-bottom: 8px;">
                  <a-tree-select
                    allowClear
                    show-search
                    tree-node-filter-prop="title"
                    style="width: 100%"
                    :dropdownStyle="{ maxHeight: '450px', overflow: 'auto' }"
                    :treeData="treeData1"
                    placeholder="请选择项目类别"
                    :replaceFields="replaceFields"
                    @change="initrOrgName"
                  >
                    <span slot="title" slot-scope="{ id }">{{ id }}</span>
                  </a-tree-select>
                </a-form-item>
              </a-col>
              <a-col :span="12"  >
                <a-form-item has-feedback style="margin-bottom: 8px;">
                  <a-input-search
                    @search="onSearch"
                    enter-button
                    placeholder="输入关键词搜索"
                    v-decorator="['itemSearchValue']"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <!-- 表格1-->
          <a-table
            @change="handleTableChange"
            :pagination="pagination1"
            size="small"
            :columns="innerColumns"
            :data-source="tableData1"
            :rowKey="(record,index)=> record.itemId+index"
            :customRow="click"
          >
            <!--序号-->
            <template slot="index" slot-scope="text,record,index">
              <span>{{(queryParam.pageNum-1)*pagination2.pageSize+(index+1)}}</span>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane :key="2" tab="产品清单">
          <a-form :form="form" class="input-search" >
            <a-row :gutter="16" style="margin: 0px 0 10px;">
              <a-col :span="12" >
                <a-form-item  has-feedback style="margin-bottom: 8px;">
                  <a-tree-select
                    allowClear
                    show-search
                    tree-node-filter-prop="title"
                    style="width: 100%"
                    :dropdownStyle="{ maxHeight: '450px', overflow: 'auto' }"
                    :treeData="treeData2"
                    placeholder="请选择产品类别"
                    :replaceFields="replaceFields"
                    @change="initrOrgName"
                  >
                    <span slot="title" slot-scope="{ id }">{{ id }}</span>
                  </a-tree-select>
                </a-form-item>
              </a-col>
              <a-col :span="12"  >
                <a-form-item has-feedback style="margin-bottom: 8px;">
                  <a-input-search
                    @search="onSearch"
                    enter-button
                    placeholder="输入关键词搜索"
                    v-decorator="['productSearchValue']"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <!-- 表格2-->
          <a-table
            @change="handleTableChange"
            :pagination="pagination2"
            size="small"
            :columns="innerColumns"
            :data-source="tableData2"
            :rowKey="(record,index)=> record.itemId+index"
            :customRow="click"
          >
            <template slot="index" slot-scope="text,record,index">
              <span>{{(queryParam.pageNum-1)*pagination3.pageSize+(index+1)}}</span>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane :key="3" tab="活动列表">
          <a-form :form="form" class="input-search">
            <a-row :gutter="16" style="margin: 0px 0 10px;">
              <a-col :span="12" >
                <a-form-item  has-feedback style="margin-bottom: 8px;">
                  <a-input-search
                    @search="onSearch"
                    enter-button
                    placeholder="输入关键词搜索"
                    v-decorator="['activitySearchValue']"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <!-- 表格3-->
          <a-table
            :expandIcon="expandIcon"
            @change="handleTableChange"
            :pagination="pagination3"
            size="small"
            :columns="innerColumns"
            :data-source="tableData3"
            :rowKey="(record,index)=> record.itemId+index"
            :customRow="click"
          >
            <template slot="index" slot-scope="text,record,index">
              <span>{{(queryParam.pageNum-1)*pagination4.pageSize+(index+1)}}</span>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane :key="4" tab="套餐清单">
          <a-form :form="form" class="input-search">
            <a-row :gutter="16" style="margin: 0px 0 10px;">
              <a-col :span="12" >
                <a-form-item  has-feedback style="margin-bottom: 8px;">
                  <a-input-search
                    @search="onSearch"
                    enter-button
                    placeholder="输入关键词搜索"
                    v-decorator="['packageSearchValue']"/>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
          <!-- 表格4-->
          <a-table
            :expandIcon="expandIcon"
            @change="handleTableChange"
            :pagination="pagination4"
            size="small"
            :columns="innerColumns"
            :data-source="tableData4"
            :rowKey="(record,index)=> record.itemId+index"
            :customRow="click"
          >
            <template slot="index" slot-scope="text,record,index">
              <span>{{(queryParam.pageNum-1)*pagination4.pageSize+(index+1)}}</span>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>
    </a-spin>
  </a-drawer>
</template>

<script>
const pagesize = 15
import {
  getItemListById,
  getProductListById,
  getPackageListById,
  getActivityListById,
  getItemClasssify,
  getProductTree,
  getActivityTree,
  getPackageTree,
  getConsultItemList,
  getConsultProductList,
  getConsultActivityList,
  getConsultPackageList
} from '@/api/modular/main/customer/customerScene'
import { getConsulationListByTel } from '@/api/modular/main/customer/customerConsultation'
export default {
  props:{
    tableData:{
      type: Array,
      default:()=>[]
    },
    row_record:{
      type:Object,
      default:()=>{}
    }
  },
  data () {
    return {
      spinning:false,
      current_tab: 1,
      tableData1:[],
      tableData2:[],
      tableData3:[],
      tableData4:[],
      queryParam: {
        pageNum: 1,//第几页
        pageSize: pagesize,//每页中显示数据的条数
      },
      pagination1: {
        current: 1,//当前页
        pageSize: pagesize,//当前页数
        total: 0,//总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10','15','20', '30'],//这里注意只能是字符串，不能是数字
        showTotal: total => `${ total}条`,//分页中显示总的数据
      },
      pagination2: {
        current: 1,//当前页
        pageSize: pagesize,//当前页数
        total: 0,//总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10','15', '20', '30'],//这里注意只能是字符串，不能是数字
        showTotal: total => `${ total}条`,//分页中显示总的数据
      },
      pagination3: {
        current: 1,//当前页
        pageSize: pagesize,//当前页数
        total: 0,//总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10','15', '20', '30'],//这里注意只能是字符串，不能是数字
        showTotal: total => `${ total}条`,//分页中显示总的数据
      },
      pagination4: {
        current: 1,//当前页
        pageSize: pagesize,//当前页数
        total: 0,//总条数
        showSizeChanger: true,
        showQuickJumper: true,
        pageSizeOptions: ['10','15', '20', '30'],//这里注意只能是字符串，不能是数字
        showTotal: total => `${ total}条`,//分页中显示总的数据
      },
      replaceFields: {
        title: 'name',
      },
      treeData1: [],
      treeData2: [],
      visible:false,
      form: this.$form.createForm(this),
      innerColumns: [
        { title: '序号', scopedSlots: { customRender: 'index' },width:60},
        { title: '项目名称', dataIndex: 'itemName',width: 190, ellipsis: true },
        { title: '类别', dataIndex: 'itemType', width: 80, ellipsis: true},
        { title: '执行科室', dataIndex: 'dept', width:100,ellipsis: true },
        { title: '次数', dataIndex: 'itemTimes', width:60,ellipsis: true },
        { title: '单位', dataIndex: 'itemUnit', width:60 ,ellipsis: true},

      ],
    }
  },
  mounted() {
    this.getItemTableById() //默认加载项目表格列表
    this.getProductTableById() //默认加载产品表格
    getItemClasssify().then(res=>{
      this.treeData1=res.data
      console.log('项目树',this.treeData1)
    })
    getProductTree().then(res=>{
      this.treeData2=res.data
      // console.log('产品树',this.treeData2)
    })
    getActivityTree(this.queryParam).then(res=>{
      this.tableData3=res.rows
      this.pagination3.total = parseInt(res.total)
      // console.log('活动树',this.tableData3)
      this.spinning = false
    })
    getPackageTree(this.queryParam).then(res=>{
      this.tableData4=res.rows
      this.pagination4.total = parseInt(res.total)
      console.log('套餐树',this.tableData4)
      this.spinning =false
    })
  },
  methods: {
    show() {
      this.visible = true
      this.$nextTick(()=>{
        this.form.resetFields()
      })
    },
    initrOrgName(value) {
      console.log('树形节点id：',value)
      this.spinning=true
      if(this.current_tab==1){
        this.getItemTableById(value)
        return
      }
      if(this.current_tab==2){
        this.getProductTableById(value)
        return
      }
      if(this.current_tab==3){
        this.getActivityTableById(value)
        return
      }
      if(this.current_tab==4){
        this.getPackageTableById(value)
        return
      }
    },
    //选择项目树
    getItemTableById(id=undefined){
      this.queryParam.id=id
      this.queryParam.pageNum=1
      this.pagination1.current = 1
      getConsultItemList(this.queryParam).then((res) => {
        // console.log('项目表格',res)
        this.tableData1 = res.rows
        this.pagination1.total = parseInt(res.total)
        this.spinning=false
      })
    },
    //选择产品树
      getProductTableById(id=undefined){
        this.queryParam.id=id
        this.queryParam.pageNum=1
        this.pagination2.current = 1
      getConsultProductList(this.queryParam).then((res) => {
        // console.log('产品表格',res)
        this.tableData2 = res.rows
        this.pagination2.total = parseInt(res.total)
        this.spinning=false
      })
    },
    //选择活动
    getActivityTableById(id){
      this.queryParam.id=id
      this.queryParam.pageNum=1
      this.pagination3.current = 1
      getConsultActivityList(this.queryParam).then((res) => {
        // console.log('活动表格',res)
        this.tableData3 = res.data
        this.pagination3.total = parseInt(res.total)
        this.spinning=false
      })
    },
    //选择套餐
    getPackageTableById(id){
      this.queryParam.id=id
      this.queryParam.pageNum=1
      this.pagination4.current = 1
      getConsultPackageList(this.queryParam).then((res) => {
        // console.log('套餐表格',res)
        this.tableData4 = res.rows
        this.pagination4.total = parseInt(res.total)
        this.spinning=false
      })
    },
    /**
     表格行点击事件
     * */
    click(record){
      return {
        on: {
          dblclick:(e)=>{
            // console.log('record',record)
            //项目
            if(this.current_tab==1){
              if(this.tableData.some(item=> record.itemId==item.itemId)){
                // this.$message.info(`项目-${record.itemName}已选择!`)
                this.$message.info(()=>{
                  return (
                    <span>项目<span style="color:rgb(255, 31, 31);" >{record.itemName}</span>已选择!</span>
                  )
                })
                return
              }
              this.spinning=true
              getItemListById({id:record.itemId}).then(res=>{
                this.spinning=false
                console.log('双击项目结果',res)
                this.$emit('dbclick_row',res.data)
              })
              return
            }
            //产品
            if(this.current_tab==2){
              if(this.tableData.some(item=> record.itemId==item.itemId)){
                this.$message.info(()=>{
                  return (
                    <span>产品<span style="color:rgb(255, 31, 31);" >{record.itemName}</span>已选择!</span>
                  )
                })
                return
              }
              this.spinning=true
              getProductListById({id:record.itemId}).then(res=>{
                this.spinning=false
                console.log('双击产品结果',res)
                this.$emit('dbclick_row',res.data)
              })
              return
            }
            //活动
            if(this.current_tab==3){
              if(this.tableData.some(item=> record.itemId==item.activityId)){
                this.$message.info(()=>{
                  return (
                    <span>活动<span style="color:rgb(255, 31, 31);" >{record.itemName}</span>已选择!</span>
                  )
                })
                return
              }
              if(!record.children) return
              this.spinning=true
              getActivityListById({id:record.itemId}).then(res=>{
                this.spinning=false
                console.log('双击活动结果',res)
                this.$emit('dbclick_row',res.data)
              })
              return
            }
            //套餐
            if(this.current_tab==4){
              if(this.tableData.some(item=> record.itemId==item.memuId)){
                this.$message.info(()=>{
                  return (
                    <span>套餐<span style="color:rgb(255, 31, 31);" >{record.itemName}</span>已选择!</span>
                  )
                })
                return
              }
              if(!record.children) return
              this.spinning=true
              getPackageListById({id:record.itemId}).then(res=>{
                this.spinning=false
                console.log('双击套餐结果',res)
                this.$emit('dbclick_row',res.data)
              })
            }
          }
        }
      }
    },
    /**
     判断是否有包含数据
     * */
    tableDataIncludes(tableData,targetData){
      let result =false
      for(let i=0;i<targetData.length;i++){
        if(tableData.includes(targetData[i])){
          result =true
          break
        }
      }
      return result
    },
    /**
     分页
     * */
    handleTableChange(pagination, filters, sorter) {
      this.spinning=true

      if(this.current_tab ==1){
        this.pagination1.current = pagination.current
        this.pagination1.pageSize = pagination.pageSize
        this.queryParam.pageNum=pagination.current
        this.queryParam.pageSize = pagination.pageSize
        getConsultItemList(this.queryParam ).then((res) => {
          console.log('右边表格',res)
          this.tableData1 = res.rows
          this.spinning=false
          return
        })
      }
      if(this.current_tab ==2){
        this.pagination2.current = pagination.current
        this.pagination2.pageSize = pagination.pageSize
        this.queryParam.pageNum=pagination.current
        this.queryParam.pageSize = pagination.pageSize
        getConsultProductList(this.queryParam ).then((res) => {
          console.log('右边表格',res)
          this.tableData2 = res.rows
          this.spinning=false
          return
        })
      }
      if(this.current_tab ==3){
        this.pagination3.current = pagination.current
        this.pagination3.pageSize = pagination.pageSize
        this.queryParam.pageNum=pagination.current
        this.queryParam.pageSize = pagination.pageSize
        getConsultActivityList(this.queryParam ).then((res) => {
          console.log('右边表格',res)
          this.tableData3 = res.rows
          this.spinning=false
          return
        })
      }
      if(this.current_tab ==4){
        this.pagination4.current = pagination.current
        this.pagination4.pageSize = pagination.pageSize
        this.queryParam.pageNum=pagination.current
        this.queryParam.pageSize = pagination.pageSize
        getConsultPackageList(this.queryParam ).then((res) => {
          console.log('右边表格',res)
          this.tableData4 = res.rows
          this.spinning=false
          return
        })
      }
    },
    /**
     查询客户
     * */
    onSearch(){
      this.spinning=true
      this.queryParam.pageNum=1
      if(this.current_tab==1){
        const value =this.form.getFieldValue('itemSearchValue')
        this.pagination1.current=1
        this.queryParam.name=value?value.trim():value
        getConsultItemList(this.queryParam).then(res=>{
          this.tableData1=res.rows
          this.pagination1.total = parseInt(res.total)
          this.spinning = false
        })
        return
      }
      if(this.current_tab==2){
        const value =this.form.getFieldValue('productSearchValue')
        this.pagination2.current=1
        this.queryParam.name=value?value.trim():value
        getConsultProductList(this.queryParam).then(res=>{
          this.tableData2=res.rows
          this.pagination2.total = parseInt(res.total)
          this.spinning = false
        })
        return
      }
      if(this.current_tab==3){
        const value =this.form.getFieldValue('activitySearchValue')
        this.pagination3.current=1
        this.queryParam.name=value?value.trim():value
        getActivityTree(this.queryParam).then(res=>{
          this.tableData3=res.rows
          this.pagination3.total = parseInt(res.total)
          this.spinning = false
        })
        return
      }
      if(this.current_tab==4){
        const value =this.form.getFieldValue('packageSearchValue')
        this.pagination4.current=1
        this.queryParam.name=value?value.trim():value
        getPackageTree(this.queryParam).then(res=>{
          this.tableData4=res.rows
          this.pagination4.total = parseInt(res.total)
          this.spinning = false
        })
      }

    },
    /**
     切换选项卡
     * */
    changeTabs(key) {
      this.current_tab = key
      if(key==1){
        this.queryParam.pageNum= this.pagination1.current
        this.queryParam.pageSize = this.pagination1.pageSize
        return
      }
      if(key==2){
        this.queryParam.pageNum= this.pagination2.current
        this.queryParam.pageSize = this.pagination2.pageSize
        return
      }
      if(key==3){
        this.queryParam.pageNum= this.pagination3.current
        this.queryParam.pageSize = this.pagination3.pageSize
        return
      }
      if(key==4){
        this.queryParam.pageNum= this.pagination4.current
        this.queryParam.pageSize = this.pagination4.pageSize
      }
    },
    expandIcon (props) {
      if (props.record.children) {
        if (props.expanded) {//有数据-展开时候图标
          return (
            <a style="color: 'black',margin-right:0px" onClick={(e) => {
              e.preventDefault()
              e.stopPropagation()
              props.onExpand(props.record, e)
            }}>
              <a-icon style="font-size:14px;" type="minus-square" />
            </a>
          )
        } else {//有数据-未展开时候图标
          return (
            <a style="color: 'black' ,margin-right:0px" onClick={(e) => {
              e.preventDefault()
              e.stopPropagation()
              props.onExpand(props.record, e)
            }}>
              <a-icon style="font-size:14px;" type="plus-square" />
            </a>
          )
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>

